<template>
  <div class="reserve-box">
    <el-collapse
      v-model="activeName"
      accordion
    >
      <el-collapse-item
        v-for="pro in reserveProjectList"
        :key="pro.id"
        :title="pro.name"
        :name="pro.id"
      >
        <template #title>
          <div class="project-name">
            <el-icon class="header-icon">
              <ele-Calendar />
            </el-icon>
            {{ pro.name }}
          </div>
        </template>
        <reserve-time-range
          v-model:value="dateValues[pro.id]"
          :chosen-day-of-week="pro.openWeekDays"
          :date-range="pro.reserveDateRangeType === 2 ? pro.reserveDateRange : []"
          :time-range-list="getFormatTimeRangeList(pro)"
          :project="pro"
          @change-date="
            date => {
              changeDate(date, pro.id);
            }
          "
        />
        <el-alert
          v-if="dateValues[pro.id]"
          :title="`${$t('formgen.reserveTimeRange.selected')}：${formatDate(pro.id)}`"
          type="success"
          @close="handleCancelSelect(pro.id)"
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup nmae="TReserveTimeRange">
import { ref, reactive, watch, defineEmits, defineProps, useAttrs } from "vue";
import ReserveTimeRange from "./ReserveTimeRange.vue";
import { getRequest } from "@/api/baseRequest";
import { i18n } from "@/i18n";
import { useRoute } from "vue-router";

// 定义 props 和 emits
defineProps({
  reserveProjectList: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(["update:value"]);

// 响应式数据
const activeName = ref(1);
const dateValues = reactive({});
const projectDateRangeCount = reactive({});

// 取消选择
const handleCancelSelect = id => {
  dateValues[id] = null;
};

// 格式化时间段列表
const getFormatTimeRangeList = pro => {
  return pro.timeRangeList.map(item => {
    // 查询使用过的数量
    let count = 0;
    if (projectDateRangeCount[pro.id] && projectDateRangeCount[pro.id][item.timeRange.join("-")]) {
      count = projectDateRangeCount[pro.id][item.timeRange.join("-")];
    }
    let remain = null;
    // item.value 是总共的名额 null表示无限名额
    if (item.value !== null && item.value !== undefined && item.value !== "") {
      remain = count ? item.value - count : item.value;
    }
    return {
      text: item.timeRange.join("-"),
      value: remain,
      status:
        remain !== null
          ? `${i18n.global.t("formgen.reserveTimeRange.remaining")}${!remain || remain < 0 ? 0 : remain}`
          : i18n.global.t("formgen.reserveTimeRange.full")
    };
  });
};

const route = useRoute();
const attr = useAttrs();

// 日期变更
const changeDate = (date, projectId) => {
  getRequest("/form/ext/getReservationTimeRangeCount", {
    formKey: route.params.key,
    formItemId: attr.dId,
    projectId: projectId,
    date: date
  }).then(res => {
    projectDateRangeCount[projectId] = res.data;
  });
};

// 格式化日期
const formatDate = id => {
  return dateValues[id];
};

// 深度监听 dateValues
watch(
  dateValues,
  newValue => {
    emit("update:value", newValue);
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.reserve-box .project-name {
  padding-left: 20px;
  font-weight: bold;
}

.reserve-box .text {
  font-size: 0.6rem;
  margin-top: 0;
  font-weight: normal;
  color: var(--form-theme-color);
}

:deep(.reserve-box .el-calendar-day) {
  height: 60px !important;
  text-align: center !important;
}

:deep(.reserve-box .el-calendar-table .is-selected .el-calendar-day:hover) {
  background-color: var(--form-theme-color);
  color: #fff;
}

:deep(.reserve-box .el-calendar-table td.is-selected) {
  background-color: var(--form-theme-color);
  color: #fff;

  .text {
    color: #fff;
  }
}

@media screen and (max-width: 500px) {
  :deep(.reserve-box .el-calendar-day) {
    height: 50px !important;
    padding: 0px !important;
    text-align: center !important;
  }
}
</style>
